<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<style>
    #canvas {
        border: 1px solid grey;
        position: absolute;
        background: url(./images/ggk.jpeg) no-repeat center center;
        background-size: contain;
    }
</style>
<script>
    var canvas = document.getElementById("canvas");
    var cxt = canvas.getContext("2d");
    cxt.fillStyle = "grey";
    cxt.rect(0, 0, canvas.width, canvas.height);//创建矩形画布
    cxt.fill();//填充颜色
    cxt.globalCompositeOperation = "destination-out";//合成重叠属性
    var startX, startY;
    //设置清空部分
    function touchMove(event) {
        event.preventDefault();
        var completed = 0;
        var data = cxt.getImageData(0, 0, 200, 100).data;
        var total = data.length / 4;
        var touch = event.touches[0];
        var x = touch.pageX;
        var y = touch.pageY;
        cxt.beginPath();
        cxt.arc(x, y, 20, 0, Math.PI * 2, false);
        cxt.fill();
        for (let i = 3; i < data.length; i += 4) {
            if (data[i] === 0) {
                completed += 1;
            }
        }
        if (completed > total / 1.5) {//根据自己要刮开的面积大小改变数值
            console.log("已完成刮奖");
            cxt.clearRect(0, 0, canvas.width, canvas.height);//完成刮奖后清除剩余没有刮开的地方
        }
    }
    canvas.addEventListener("touchmove", touchMove, false);//注册事件
</script>
</body>
</html>